<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>06canvas线相关的属性方法</title>
</head>
<style>
    canvas{
        border: 1px solid #ccc;
    }
</style>
<body>
<canvas width="600"height="400"></canvas>
<script>
    var myCanvas =document.querySelector('canvas');
    var ctx =myCanvas.getContext('2d');
    /*画平行线*/
    ctx.beginPath();/*开启新路径*/
    /*蓝色 10px*/
    ctx.moveTo(100,100.5);
    ctx.lineTo(150,50.5);
    ctx.lineTo(200,100.5);
    ctx.strokeStyle='blue';
    ctx.lineWidth=10;
    ctx.lineCap='butt'; /* 线末端类型，默认值*/
    ctx.lineJoin='miter'; /*相交线的拐点默认值*/
    ctx.stroke();
    /*红色 20px*/
    ctx.beginPath();/*开启新路径*/
    ctx.moveTo(100,200.5);
    ctx.lineTo(150,150.5);
    ctx.lineTo(200,200.5);

    ctx.strokeStyle='red';
    ctx.lineWidth=20;
    ctx.lineJoin='bevel';
    ctx.lineCap='round';
    ctx.stroke();
    /*黄色 30px*/
    ctx.beginPath();/*开启新路径*/
    ctx.moveTo(100,300.5);
    ctx.lineTo(150,250.5);
    ctx.lineTo(200,300.5);
    ctx.strokeStyle='green';
    ctx.lineJoin='round';
    ctx.lineWidth=30;
    ctx.lineCap='square';
    ctx.stroke();
    /*开启新的路径可以解决样式会覆盖的问题*/
</script>
</body>
</html>
